<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - FTP管理系统'">系统监控 - FTP管理系统</title>

    <!-- Bootstrap CSS -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://witmore.oss-cn-hangzhou.aliyuncs.com/cdn/npm/font-awesome/6.7.2/all.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link th:href="@{/css/admin.css}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="admin-layout">
            <!-- 左侧边栏 -->
            <div class="sidebar">
                <div class="sidebar-brand">
                    <h4><i class="fas fa-server me-2"></i>FTP管理系统</h4>
                </div>
                <ul class="sidebar-menu">
                    <li>
                        <a href="/admin">
                            <i class="fas fa-tachometer-alt"></i>仪表盘
                        </a>
                    </li>
                    <li>
                        <a href="/admin/users">
                            <i class="fas fa-users"></i>用户管理
                        </a>
                    </li>
                    <li>
                        <a href="/admin/logs">
                            <i class="fas fa-list-alt"></i>操作日志
                        </a>
                    </li>
                    <li>
                        <a href="/admin/connections">
                            <i class="fas fa-plug"></i>连接管理
                        </a>
                    </li>
                    <li>
                        <a href="/admin/monitor" class="active">
                            <i class="fas fa-chart-line"></i>系统监控
                        </a>
                    </li>
                </ul>
            </div>

            <!-- 主内容区域 -->
            <div class="main-content">
                <!-- 顶部导航栏 -->
                <div class="top-navbar">
                    <h1 class="page-title">系统监控</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/admin">首页</a></li>
                            <li class="breadcrumb-item active">系统监控</li>
                        </ol>
                    </nav>
                </div>

                <!-- 内容区域 -->
                <div class="content-wrapper">
                    <!-- 页面操作按钮 -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div></div>
                        <button class="btn btn-outline-primary" @click="refreshData">
                            <i class="fas fa-sync-alt me-2"></i>刷新数据
                        </button>
                    </div>

            <!-- 实时统计 -->
            <div class="row mb-4">
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="display-6 text-primary">{{ stats.totalUsers }}</div>
                            <div class="text-muted">总用户数</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="display-6 text-success">{{ stats.totalConnections }}</div>
                            <div class="text-muted">连接记录</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="display-6 text-info">{{ stats.totalFileLogs }}</div>
                            <div class="text-muted">文件操作</div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="card text-center">
                        <div class="card-body">
                            <div class="display-6 text-warning">{{ stats.port }}</div>
                            <div class="text-muted">FTP端口</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 系统信息和连接状态 -->
            <div class="row">
                <!-- 系统信息 -->
                <div class="col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-server me-2"></i>系统信息
                            </h5>
                        </div>
                        <div class="card-body">
                            <table class="table table-borderless">
                                <tr>
                                    <td><strong>FTP服务状态:</strong></td>
                                    <td><span class="badge bg-success">运行中</span></td>
                                </tr>
                                <tr>
                                    <td><strong>监听端口:</strong></td>
                                    <td>{{ stats.port }}</td>
                                </tr>
                                <tr>
                                    <td><strong>被动端口:</strong></td>
                                    <td>{{ stats.passivePorts }}</td>
                                </tr>
                                <tr>
                                    <td><strong>最大连接数:</strong></td>
                                    <td>{{ stats.maxConnections }}</td>
                                </tr>
                                <tr>
                                    <td><strong>根目录:</strong></td>
                                    <td><code>{{ stats.rootDirectory }}</code></td>
                                </tr>
                                <tr>
                                    <td><strong>启动时间:</strong></td>
                                    <td>{{ formatDate(startTime) }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 活跃连接 -->
                <div class="col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-plug me-2"></i>最近连接
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>用户</th>
                                            <th>IP地址</th>
                                            <th>连接时间</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="conn in recentConnections" :key="conn.id">
                                            <td>{{ conn.username || '-' }}</td>
                                            <td><code>{{ conn.clientIp }}</code></td>
                                            <td>{{ formatDate(conn.connectTime) }}</td>
                                            <td>
                                                <span class="badge" :class="conn.status === 'CONNECTED' ? 'bg-success' : 'bg-secondary'">
                                                    {{ conn.status === 'CONNECTED' ? '已连接' : '已断开' }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr v-if="recentConnections.length === 0">
                                            <td colspan="4" class="text-center text-muted">暂无连接记录</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户活动和文件操作统计 -->
            <div class="row">
                <!-- 用户列表 -->
                <div class="col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-users me-2"></i>用户状态
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>用户名</th>
                                            <th>状态</th>
                                            <th>写权限</th>
                                            <th>最大连接</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="user in users" :key="user.id">
                                            <td>{{ user.username }}</td>
                                            <td>
                                                <span class="badge" :class="user.enabled ? 'bg-success' : 'bg-danger'">
                                                    {{ user.enabled ? '启用' : '禁用' }}
                                                </span>
                                            </td>
                                            <td>
                                                <i class="fas" :class="user.writePermission ? 'fa-check text-success' : 'fa-times text-danger'"></i>
                                            </td>
                                            <td>{{ user.maxConnections }}</td>
                                        </tr>
                                        <tr v-if="users.length === 0">
                                            <td colspan="4" class="text-center text-muted">暂无用户数据</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最近文件操作 -->
                <div class="col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-file-alt me-2"></i>最近操作
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-sm">
                                    <thead>
                                        <tr>
                                            <th>用户</th>
                                            <th>操作</th>
                                            <th>文件</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="log in recentLogs" :key="log.id">
                                            <td>{{ log.username }}</td>
                                            <td>
                                                <span class="badge badge-sm" :class="getOperationBadgeClass(log.operationType)">
                                                    {{ getOperationText(log.operationType) }}
                                                </span>
                                            </td>
                                            <td>{{ truncateText(log.fileName, 15) }}</td>
                                            <td>
                                                <i class="fas" :class="log.status === 'SUCCESS' ? 'fa-check text-success' : 'fa-times text-danger'"></i>
                                            </td>
                                        </tr>
                                        <tr v-if="recentLogs.length === 0">
                                            <td colspan="4" class="text-center text-muted">暂无操作记录</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript Libraries -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    stats: {
                        totalUsers: 0,
                        totalConnections: 0,
                        totalFileLogs: 0,
                        port: 0,
                        passivePorts: '',
                        maxConnections: 0,
                        rootDirectory: ''
                    },
                    users: [],
                    recentConnections: [],
                    recentLogs: [],
                    startTime: new Date()
                }
            },
            mounted() {
                this.loadAllData();

                // 每10秒刷新一次数据
                setInterval(() => {
                    this.loadAllData();
                }, 10000);
            },
            methods: {
                async loadAllData() {
                    await Promise.all([
                        this.loadStats(),
                        this.loadUsers(),
                        this.loadRecentConnections(),
                        this.loadRecentLogs()
                    ]);
                },
                async loadStats() {
                    try {
                        const response = await axios.get('/api/ftp/status');
                        if (response.data.code === 200) {
                            this.stats = response.data.data;
                        }
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                    }
                },
                async loadUsers() {
                    try {
                        const response = await axios.get('/api/ftp/users/simple');
                        if (response.data.code === 200) {
                            this.users = response.data.data || [];
                        }
                    } catch (error) {
                        console.error('加载用户数据失败:', error);
                    }
                },
                async loadRecentConnections() {
                    try {
                        const response = await axios.get('/api/ftp/connections?page=1&size=5');
                        if (response.data.code === 200) {
                            this.recentConnections = response.data.records || [];
                        }
                    } catch (error) {
                        console.error('加载连接数据失败:', error);
                    }
                },
                async loadRecentLogs() {
                    try {
                        const response = await axios.get('/api/ftp/file-logs?page=1&size=5');
                        if (response.data.code === 200) {
                            this.recentLogs = response.data.records || [];
                        }
                    } catch (error) {
                        console.error('加载日志数据失败:', error);
                    }
                },
                refreshData() {
                    this.loadAllData();
                },
                formatDate(dateStr) {
                    if (!dateStr) return '';
                    return new Date(dateStr).toLocaleString('zh-CN');
                },
                getOperationBadgeClass(operation) {
                    switch (operation) {
                        case 'UPLOAD': return 'bg-primary';
                        case 'DOWNLOAD': return 'bg-success';
                        case 'DELETE': return 'bg-danger';
                        case 'LIST': return 'bg-info';
                        default: return 'bg-secondary';
                    }
                },
                getOperationText(operation) {
                    switch (operation) {
                        case 'UPLOAD': return '上传';
                        case 'DOWNLOAD': return '下载';
                        case 'DELETE': return '删除';
                        case 'LIST': return '列表';
                        default: return operation;
                    }
                },
                truncateText(text, length) {
                    if (!text) return '';
                    return text.length > length ? text.substring(0, length) + '...' : text;
                }
            }
        }).mount('#app');
    </script>

    <style>
        .badge-sm {
            font-size: 0.65rem;
            padding: 0.25rem 0.5rem;
        }

        .display-6 {
            font-size: 2rem;
            font-weight: 600;
        }

        .card-body .table {
            margin-bottom: 0;
        }

        .table-sm td {
            padding: 0.5rem 0.75rem;
        }
    </style>
</body>
</html>
